<template>
	<view class="warp">
		<view class="care">
			带<span>*</span>号为必填项
		</view>
		
		<!-- 公司名称下拉选择 -->
		<view class="inp_warp">
			<view class="inp_title key">{{fields.common_seal}}<span>*</span></view>
			<picker mode="selector" :range="companyList" range-key="name" @change="changeCompany">
				<view class="form_right">
					<view :class="selectedCompany ? 'valueActive' : ''">
						{{selectedCompany ? companyList[selectedCompany].name : '点击选择'}}
					</view>
					<view class="iconfont icon-you"></view>
				</view>
			</picker>
		</view>
		
		<!-- 章类别下拉选择 -->
		<view class="inp_warp">
			<view class="inp_title key">{{fields.usedeatil}}<span>*</span></view>
			<picker mode="selector" :range="sealTypeList" range-key="name" @change="changeSealType">
				<view class="form_right">
					<view :class="selectedSealType ? 'valueActive' : ''">
						{{selectedSealType ? sealTypeList[selectedSealType].name : '点击选择'}}
					</view>
					<view class="iconfont icon-you"></view>
				</view>
			</picker>
		</view>
		
		<!-- 客户名称选择 -->
		<view class="inp_warp">
			<view class="inp_title key">{{fields.customer}}<span>*</span></view>
			<view class="form_right" >
				<input type="text" v-model="customername" :placeholder="'请输入'+fields.customer" placeholder-style="color:#999;font-size:24rpx" class="rightinput" >
			</view>
		</view>
		
		<!-- 备注 -->
		<view class="fllow_area">
			<view class="area_head key">{{fields.remark}}:</view>
			<textarea v-model="remark" :class="remark ? 'valueActive' : ''" placeholder="请填写备注"
				placeholder-style="color:#999" />
		</view>
		
		<!-- 附件上传 -->
		<view class="inp_warp" style="margin-top:0;">
			<view class="inp_title key">{{fields.file_ids}}<span>*</span>: </view>
			<view class="form_right" @click="uploadFile">
				<view>点击上传</view>
				<view class="iconfont icon-you"></view>
			</view>
		</view>
		<view class="doc_item" v-for="(item,index) in fileList" :key="index">
			<template v-if="item.types=='file'">
				<image :src="BASE_IMG_URL+'/index/file-clip.png'" class="remarkimg"></image>
				<view class="doc_name" @click="toLookFile(item)">{{item.name}}</view>
				<image :src="BASE_IMG_URL+'/index/delete.png'" @click="delFile(item.id,index)" class="deleimg"></image>
			</template>
			<template v-else>
				<view class="imgbox">
					<image :src="BASE_IMG_URL+'/index/close.png'" class="delimg" @click="delFile(item.id,index)"></image>
					<image :src="item.file_path||item.url" class="selfimg" @click="toLookFile(item)"></image>
				</view>
			</template>
		</view>
		
		<!-- 审批组件 -->
		<fixed-approval v-if="approvalPro.status == 1" :list="approvalPro.stepList"></fixed-approval>
		<examine-people v-if="approvalPro.status == 0" :list="remindPeople" @delItem="delItem"></examine-people>
		
		<!-- 操作按钮 -->
		<view class="btn">
			<!-- <button class="button" type="" size="mini" @click="$noMultipleClicks(toSave)">保存</button> -->
			<button class="button" type="warn" size="mini" @click="$noMultipleClicks(toSubmit)">提交</button>
		</view>
		<view class="botsec"></view>
	</view>
</template>

<script>
import { BASE_IMG_URL, BASE_URL } from '@/api/http.js'
import { mapState } from 'vuex'
import { commonFun } from '@/common/navigate.js'
import { netAddCommonSeal, netEditCommonSeal, getCommonsealDetail, netApprovalProcess,netGetCommonsealSet } from '@/api/api.js'

export default{
	mixins:[commonFun],
	data() {
		return{
			noClick: true,
			BASE_IMG_URL: BASE_IMG_URL,
			// 公司列表
			companyList: [],
			// 章类别列表
			sealTypeList: [],
			// 选中的公司索引
			selectedCompany: '',
			// 选中的章类别索引
			selectedSealType: '',
			// 客户名称
			customername: '',
			// 备注
			remark: '',
			// 附件列表
			fileList: [],
			// 审批流程
			approvalPro: {},
			// 提交状态
			check_status: 0,
			fields:{
				'common_seal' : '公司名称',
				'usedeatil' : '章类别',
				'customer' : '客户名称',
				'remark' : '备注',
				'file_ids' : '附件',
			}
		}
	},
	onLoad(options) {
		// 获取公司列表和章类别列表
		this.getCommonsealSet()
		
		// 如果有id参数则是编辑模式
		if(options.id){
			this.id = options.id
			this.getDetail()
			uni.setNavigationBarTitle({
				title:'修改公章申请'
			})
		}else{
			// 获取审批流程
			this.getProcess()
		}
	},
	onShow() {
		this.getDefaultRemind()
	},
	methods:{
		// 获取基本信息
		getCommonsealSet() {
			let that = this
			netGetCommonsealSet().then(res => {
				that.companyList = res.data.sealList
				that.sealTypeList = res.data.usedeatilList
				that.fields = res.data.fields
			})
		},
		
		// 公司选择变化
		changeCompany(e) {
			this.selectedCompany = e.detail.value
		},
		
		// 章类别选择变化
		changeSealType(e) {
			this.selectedSealType = e.detail.value
		},
		
		// 选择客户
		toSelectCustomer(){
			uni.navigateTo({
				url:'/pages/template/relation_customer'
			})
		},
		
		// 上传附件
		uploadFile() {
			let fileUrl = this.toUploadFile((res)=>{
				this.fileList.push(res)
			})
		},
		
		// 查看附件
		toLookFile(item) {
			this.openFile({file:item.url,filename:item.name,type:item.types})
		},
		
		// 删除附件
		delFile(id,index) {
			this.fileList.splice(index,1)
		},
		
		// 获取审批流程
		getProcess() {
			netApprovalProcess({type:'common_seal'}).then(res=>{
				this.approvalPro = res.data
			})
		},
		
		// 获取详情数据（编辑时）
		getDetail() {
			getCommonsealDetail({id: this.id}).then(res => {
				res = res.data
				// 设置表单数据
				this.selectedCompany = this.companyList.findIndex(item => item.id === res.common_seal)
				this.selectedSealType = this.sealTypeList.findIndex(item => item.id === res.usedeatil)
				this.customername = res.customer
				this.remark = res.remark
				this.fileList = res.file_list
			})
		},
		
		// 保存申请
		toSave(){
			this.check_status = 0
			this.submitApply()
		},
		
		// 保存并提交
		toSubmit(){
			this.check_status = 1
			this.submitApply()
		},
		
		// 提交申请
		submitApply() {
			// 表单验证
			if(!this.selectedCompany) {
				uni.showToast({
					title:'请选择公司名称',
					icon:'none'
				})
				return
			}
			
			if(!this.selectedSealType) {
				uni.showToast({
					title:'请选择章类别',
					icon:'none'
				})
				return
			}
			
			if(!this.customername) {
				uni.showToast({
					title:'请输入客户名称',
					icon:'none'
				})
				return
			}
			if(this.fileList.length == 0) {
				uni.showToast({
					title:'请上传附件',
					icon:'none'
				})
				return
			}
			
			// 构造请求参数
			const params = {
				common_seal: this.companyList[this.selectedCompany].id,
				usedeatil: this.sealTypeList[this.selectedSealType].id,
				customer: this.customername,
				remark: this.remark,
				// check_status: this.check_status,
				file_ids: this.fileList.map(item => item.path).join(',')
			}
			
			// 如果是编辑模式
			if(this.id) {
				params.id = this.id
				netEditCommonSeal(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			} else { // 新增模式
				netAddCommonSeal(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.button{
			width: 350rpx;
			height: 80rpx;
			border:0;
			border-radius: 40rpx;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			margin: 50rpx auto env(safe-area-inset-bottom);
		}
	}
	.inp_warp {
		padding:30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EDEDED;
		.inp_title {
			font-size: 26rpx;
		}
	
		.form_right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #999;
			min-width:450rpx;
			text-align: right;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 28rpx 5rpx 0 0;
			}
			.rightinput{
				width:100%;
				text-align: right;
			}
			.radiowarp{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				radio{
					transform: scale(0.7);
				}
			}
		}
		.add_in{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:26rpx;
			color:$uni-text-color;
			.icon-jiahaocu{
				font-size:28rpx;
				color:$uni-text-color;
				margin-right:5rpx;
			}
		}
	}
	.cost_warp{
		flex:1;
		.cost_li{
			padding:24rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom:1rpx solid #EDEDED;
			.li_left{
				margin-right:24rpx;
				flex-shrink: 0;
				flex-shrink: 0;
				.icon-jian{
					font-size:35rpx;
					color:#ff7800;
				}
			}
			.cost_info{
				flex:1;
				.info_title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.name{
						font-size:26rpx;
						color:#333;
					}
					.time{
						font-size:24rpx;
						color:#666;
					}
				}
				.li_warp{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top:15rpx;
					.li_warp_left{
						font-size:26rpx;
						color:#333;
						margin-right:24rpx;
						span{
							font-size:24rpx;
							color:#666;
						}
					}
				}
			}
		}
		.total_warp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:24rpx;
			.total_left{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.total_h{
					font-size:28rpx;
					color:#000000;
				}
				.total_p{
					margin-left:20rpx;
					font-size:26rpx;
					color:#666;
					span{
						font-size:28rpx;
						color:#333;
					}
				}
			}
			.total_right{
				font-size:26rpx;
				color:#0287FF;
				width:120rpx;
				height:40rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 38rpx;
				border:1rpx solid #0287FF;
			}
		}
	}
	.fllow_area {
		background-color: #fff;
		padding:30rpx;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			line-height: 100rpx;
			text {
				color: #f00;
			}
		}
		textarea {
			width: 620rpx;
			height: 260rpx;
			margin:0 auto;
			background:rgba(202, 202, 202, 0.2);
			font-size:26rpx;
			color:#999999;
			border-radius: 20rpx;
			padding:24rpx;
			box-sizing: border-box;
		}
	}
	.imglist {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EDEDED;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	
		.imgbox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EDEDED;
			&:nth-child(4n){
				margin-right:0;
			}
			.delimg {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}
	
			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
	.doc_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24rpx 35rpx;
		border-bottom:1rpx solid #EDEDED;
		.remarkimg{
			width:31rpx;
			height:33rpx;
			margin-right:15rpx;
		}
		.deleimg{
			width:44rpx;
			height:44rpx;
		}
		.doc_name{
			width:575rpx;
			font-size:24rpx;
			color:#333;
		}
		.imgbox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EDEDED;
			&:nth-child(4n){
				margin-right:0;
			}
			.delimg {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}
			
			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>
